<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>商品详情</title>
    <link rel="stylesheet" href="/static/css/weui.min.css"/>
	<link rel="stylesheet" href="/static/css/style.css"/>
	<link rel="stylesheet" href="/static/css/swiper-4.1.6.min.css"/>
	<script data-main="/static/js/app/prod-detail" src="/static/js/lib/require.js" defer async="true"></script>
    <style>
        /*返回顶部*/
        #tophovertree{display:block;position:fixed;width:36px;height:36px;right:10px;bottom:60px;cursor:pointer;background-image:url(/static/images/tophovertree.gif);opacity:0.9;display:none}

		.swiper-pagination-bullet-active {
			background: green;
		}

		.weui-cells:before {
    		border-top: 0px solid #e5e5e5;
		}

		.weui-cells:after {
    		border-bottom: 0px solid #e5e5e5;
		}
    </style>
</head>

<body>
    <header class="wy-header">
        <div class="wy-header-icon-back"><a href="javascript:window.history.back();"></a></div>
        <div class="wy-header-title">
            <span class="wy-header-titlebut wy-header-titlebut-active" id="product">商品</span>
            <span class="wy-header-titlebut" style="margin-left:40px;" id="detail">详情</span>
            <span class="wy-header-titlebut" style="margin-left:40px;" id="evaluate">评价</span>
		</div>
		<div class="wy-header-icon-index"><a href="/zshop/"></a></div>
	</header>

	<div id="productDiv" class="wy-product-content">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				{% for di in product.detailImagesArr %}
				<div class="swiper-slide"><img src="/static/images/product/detail/{{di}}" width="100%"></div>
				{% endfor %}
			</div>
			<!-- 分页器 -->
			<div class="swiper-pagination"></div>
		</div>
		
		<div style="background-color:white;">
			<div class="weui-cell" >
				<div class="weui-cell__bd" >
					<h4 class="weui-media-box__title" style="font-size:13px;margin-bottom:7px;">{{product.name}} {{product.description}}</h4>
					<p class="weui-media-box__desc" style="color:red;margin-bottom:9px;">¥{{product.price}}</p>
					<p class="weui-media-box__desc" style="font-size:13px;">{{product.attriValueStr}}</p>
				</div>
			</div>
		</div>
		
		<div class="weui-cells" style="margin-top:5px;">
			<div class="weui-cell">
				<div class="">
					<p style="font-size:13px;color:gray;">数量</p>
				</div>
				<div class="" style="margin-left:19px;">
					<div class="Spinner" id="pcs"></div>
				</div>
				<div style="font-size:13px;color:gray;margin-left:7px;">(库存{{product.stock}}件)</div>
			</div>
		</div>
		
		<div class="wy-media-box2 weui-media-box_text" style="margin-top:5px;">
			{% for ga in product.groupAttris %}
			<div class="weui-media-box_appmsg">
				<div class="weui-media-box__hd proinfo-txt-l" style="line-height: 0px;margin-top: 11px;"><span class="promotion-label-tit">{{ga.attriName}}</span></div>
				<div class="weui-media-box__bd">
					<div class="promotion-sku clear">
						<ul class="gavUl">
							{% for gav in ga.groupAttriValueArr %}
							<li class="{{gav.class}} {{ga.attriId}}" groupAttriId="{{ga.attriId}}" disableFlag="{{gav.disabled}}"><a href="javascript:;">{{gav.attriValue}}</a></li>
							{% endfor %}
						</ul>
					</div>
				</div>
			</div>
			{% endfor %}
		</div>
	</div>
	
	<input type="hidden" id="pid" name="pid" value="{{product.id}}"/>
	<input type="hidden" id="pstock" name="pstock" value="{{product.stock}}"/>
	<input type="hidden" id="detailHtmlUrl" name="detailHtmlUrl" value="{{product.detailHtml}}"/>
	<input type="hidden" id="collectionId" name="collectionId" value="{{collection.id}}"/>

	<div id="detailDiv" style="display: none;" class="wy-product-content" >
		<a href="javascript:void(0);" id="detailDiv-loading" style="text-align:center;color:gray;" class="weui-cell weui-cell_link">
			<div class="weui-cell__bd" >
				<i class="weui-loading"></i>
				<span class="weui-loadmore__tips">正在加载</span>
			</div>
		</a>
		<div class="weui-loadmore weui-loadmore_line" id="detailDiv-reload" style="display:none;">
			<div class="weui-loadmore__tips" style="background-color: #f8f8f8;">系统异常，点此重新加载</div>
		</div>
	</div>
	<div id="evaluateDiv" style="display: none;" class="wy-product-content"></div>
	
	<span id="tophovertree" title="返回顶部"></span>
	
	<div class="weui-tabbar" style="line-height: 16px;position:fixed;">
	    <a href="javascript:;" id='kefuHref' class="promotion-foot-menu-items">
			<div class="weui-tabbar__icon promotion-foot-menu-kefu" style="width:20px;height:20px;"></div>
			<p class="weui-tabbar__label">客服</p>
	    </a>
	    <a href="javascript:;" id='collectionHref' class="promotion-foot-menu-items">
			{% if collection %}
			<div class="weui-tabbar__icon promotion-foot-menu-collection-on" style="width:20px;height:20px;"></div>
			<p class="weui-tabbar__label" style="color: green;">收藏</p>
			{% else %}
			<div class="weui-tabbar__icon promotion-foot-menu-collection" style="width:20px;height:20px;"></div>
			<p class="weui-tabbar__label">收藏</p>
			{% endif %}
	    </a>
	    <a href="/zshop/user/cart" class="promotion-foot-menu-items">
			{% if cardProdNum > 0 %}
			<span class="weui-badge" id="cardProdNum" style="position: absolute;top: -.4em;right: 1em;">{{cardProdNum}}</span>
			{% else %}
			<span class="weui-badge" id="cardProdNum" style="position: absolute;top: -.4em;right: 1em;display:none;">0</span>
			{% endif %}
			<div class="weui-tabbar__icon promotion-foot-menu-cart" style="width:20px;height:20px;"></div>
			<p class="weui-tabbar__label">购物车</p>
	    </a>
	    <a href="javascript:;" id="addCart" class="weui-tabbar__item" style="background-color:green;">
			<p class="promotion-foot-menu-label">加入购物车</p>
	    </a>
	    <a href="javascript:;" id="buyNowBtn" class="weui-tabbar__item" >
			<p class="promotion-foot-menu-label" style="color:gray;">立即购买</p>
	    </a>
	</div>

	{% include "public-tip.html" %}
	<input type="hidden" id="gavJsonStr" value="{{product.gavJsonStr}}"/>

	<div >
		<div class="weui-mask" id="iosMask" style="display: none"></div>
		<div class="weui-actionsheet" id="iosActionsheet">
			<div class="weui-actionsheet__title" style="height: 42px;color:green;display:none;">
				<p class="weui-actionsheet__title-text" style="font-size:14px;">客服小姐姐电话</p>
			</div>
			<div class="weui-actionsheet__menu" id="callKfNumD">
				<div class="weui-actionsheet__cell" style="font-size:14px;color: #888;"><span style="color:green;">呼叫</span> 400-800-8000</div>
				<a id="callKfNumA" href="tel:400-800-8000"></a>
			</div>
			<div class="weui-actionsheet__action">
				<div class="weui-actionsheet__cell" id="iosActionsheetCancel" style="font-size:14px;color:#888;;">取消</div>
			</div>
		</div>
	</div>
</body>
</html>